<template>
    <div>
        <h2 class="h2-Title">注册</h2>
        <br />
        <div>
            <el-form :model="userinfo" status-icon :rules="rules" ref="userinfo" label-width="100px" class="login">
                <el-form-item label="用户名：" prop="name">
                    <el-input type="text" v-model="userinfo.name" autocomplete="off" suffix-icon="el-icon-user"
                        class="userinput">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input type="password" v-model="userinfo.password" autocomplete="off" show-password
                        class="userinput"></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="confirmpassword">
                    <el-input type="password" v-model="userinfo.confirmpassword" autocomplete="off" show-password
                        class="userinput">
                    </el-input>
                </el-form-item>
                <el-form-item class="formbutton">
                    <el-button type="primary" @click="submitForm('userinfo')" round class="revertbtn">注册</el-button>
                    <el-button type="primary" @click="goLogin()" round class="revertbtn">登陆</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    props: [],
    data() {
        var validateName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入用户名'));
            } else {
                callback();
            }
        };
        var validatePassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        var validateConfirmPassword = (rule, value, callback) => {
            if (value === "") {
                callback(new Error('请输入确认密码'));
            } else if (value !== this.userinfo.password) {
                callback(new Error('确认密码与密码不一致'));
            } else {
                callback();
            }
        }
        return {
            viewname: "Login",

            userinfo: {
                name: "",
                password: "",
                confirmpassword: "",
            },
            rules: {
                name: [
                    { validator: validateName, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                confirmpassword: [
                    { validator: validateConfirmPassword, trigger: 'blur' }
                ],
            }
        };
    },
    methods: {
        Change(id) {
            this.$store.commit("Change", { id: id, name: this.viewname });
        },
        goLogin(id) {
            this.viewname = "Login"
            this.Change(id)
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$api.Register(this.userinfo).then((res) => {
                        if (res.data.status === 200) {
                            this.$message({
                                message: "注册成功",
                                type: "success",
                            });
                            this.$store.commit("Change", { id: 0, name: this.viewname });
                        } else {
                            this.$message({
                                message: `注册失败,${res.data.msg}`,
                                type: "error",
                            });
                            return false;
                        }
                    });
                } else {
                    return false;
                }
            })
        }
    },
};
</script>

<style scoped>
.h2-Title {
    padding-top: 20px;
    font-size: 23px;
    padding-bottom: 5px;
}

.formbutton {
    margin-left: -100px;
    text-align: center;
}

.userinput {
    border-radius: 5px;
    border: 1px solid #e11057;
    outline: medium;
}

.userinput>>>.el-input__inner {
    border: none;
    outline: none;
}

.revertbtn {
    width: 140px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #e11057;
    transition: all 0.5s;
    background-color: #fef6e7;
    border: 1px solid #e11057;
}

.revertbtn:hover {
    transition: all 0.5s;
    background-color: #e11057;
    border: 1px solid #e11057;
}

.revertbtn:focus {
    transition: all 0.5s;
    background-color: #e11057;
    border: 1px solid #e11057;
}
</style>